<template>
    <div class="i-layout-menu-head hq-layout-menu-head" :class="{ 'i-layout-menu-head-mobile': isMobile }">
        <Menu :active-name="headerName" ref="menu" width="auto" :theme="headerTheme">
            <template v-for="item in filterHeader">
                <MenuItem  v-if="!menuCollapse" :class="{ 'i-layout-menu-head-mobile': isMobile , 'hq-layout-menu-head-collapse' : menuCollapse}" :to="item.path" :replace="item.replace" :target="item.target" :name="item.name" :key="item.path" @click.native="handleClick(item.path, 'header')">
                    <i-menu-head-title :item="item" :key="item.path" />
                </MenuItem>
                <MenuItem v-else :class="{ 'i-layout-menu-head-mobile': isMobile , 'hq-layout-menu-head-collapse' : menuCollapse}" :target="item.target" :name="item.name" :key="item.path"  @click.native="handleClick(item.path, 'header')">
                    <i-menu-head-title :item="item" :key="item.path" />
                    <div class="hq-layout-menu-head-menu-side">
                        <Menu
                            ref="menu"
                            :class="{ 'i-layout-menu-side-collapse': menuCollapse }"
                            :theme="siderTheme"
                            :accordion="true"
                            :active-name="activePath"
                            :open-names="openNames"
                            width="auto">
                            <template v-for="(items, index) in menuSiders" >
                                <span v-if="item.name == items.header" :key="index">
                                    <i-menu-side-item v-if="items.children === undefined || !items.children.length" :menu="items" :key="index"/>
                                    <i-menu-side-submenu v-else :menu="items" :key="index"  />
                                </span>
                            </template>
                        </Menu>
                    </div>
                </MenuItem>
            </template>
        </Menu>
    </div>
</template>
<script>
    import iMenuHeadTitle from './title';
    import iMenuSideItem from './../menu-side/menu-item';
    import iMenuSideSubmenu from './../menu-side/submenu';
    import { mapState, mapGetters, mapMutations } from 'vuex';
    import { getStyle } from 'view-design/src/utils/assist';
    import clickItem from '../mixins/click-item';
    import util from '@/libs/util'
    import { on, off } from 'view-design/src/utils/dom';
    import { throttle } from 'lodash';
    // import menuSider from '@/menu/sider';
    export default {
        name: 'iMenuHead',
        components: { iMenuHeadTitle, iMenuSideSubmenu, iMenuSideItem },
        mixins: [clickItem],
        computed: {

            ...mapState('admin/layout', [
                'siderTheme',
                'menuAccordion',
                'headerMenu',
                'isMobile',
                'menuCollapse',
                'headerTheme'
            ]),
            ...mapState('admin/menu', [
                'activePath',
                'openNames',
                'headerName'
            ]),
            ...mapGetters('admin/menu', [
                'filterHeader',
                
            ])

        },

        data () {
            return {
                handleResize: () => {},
                menuSiders: util.storage.get('menus').sider,
                isMenuLimit: false,
                menuMaxWidth: 0 // 达到这个值后，menu 就显示不下了
            }
        },
        methods: {
            ...mapMutations('admin/layout', [
                'updateMenuCollapse'
            ]),
            mouseOver () {
                this.updateMenuCollapse(false);
                util.storage.set('tooptipShow', true)
            },
            handleClick () {
                this.updateMenuCollapse(false);
            },
            handleGetMenuHeight () {
                const menuWidth = parseInt(getStyle(this.$el, 'width'));
                const $menu = this.$refs.menu;
                if ($menu) {
                    const menuHeight = parseInt(getStyle(this.$refs.menu.$el, 'height'));
                    if (menuHeight > 64) {
                        if (!this.isMenuLimit) {
                            this.menuMaxWidth = menuWidth;
                        }
                        this.isMenuLimit = true;
                    }
                } else if (menuWidth >= this.menuMaxWidth) {
                    this.isMenuLimit = false;
                }
            }
        },
        watch: {
            filterHeader () {
                this.handleGetMenuHeight();
            },
            isMobile () {
                this.handleGetMenuHeight();
            }
        },
        mounted () {
            // console.log(this.headerName, 'headerName');
            // console.log(this.filterHeader, 'filterHeader');
            // console.log(this.menuSiders,'menuSiders')
            // this.handleResize = throttle(this.handleGetMenuHeight, 100, { leading: false });
            // on(window, 'resize', this.handleResize);
            this.handleGetMenuHeight();
        },
        beforeDestroy () {
            // off(window, 'resize', this.handleResize);
        }
    };
</script>
<style lang="less">
.hq-layout-menu-head{
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    flex: 0 0 60px;
    display: inline!important;
    .ivu-menu-vertica{
        background: #151518 !important;
    }
    .ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title{
        padding: 14px 18px;
    }
}
.hq-layout-menu-head-collapse{
    position: relative;
    &:hover{
        .hq-layout-menu-head-menu-side{
            display: block;
        }

    }
}
.hq-layout-menu-head-menu-side{
    display: none;
    width: 170px;
    position: absolute;
    top: 0;
    left: 60px;
    .ivu-menu-item-active{
    background: #151518 ;
    color: #2d8cf0 ;
  }
  .ivu-menu{
    background: #2d2d2d ;
    .ivu-menu-item-active{
      background: #151518 ;
      color: #2d8cf0 ;
    }
    .ivu-menu-item-active:hover{
      background: #151518 ;
    }

  }
  .ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item{
      padding-left:0 !important;
  }
   .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover{
        background: #151518 !important;
    }
}

</style>
